<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="cells">
        <div class="broker-item" v-cloak :style="{ background: bg }">
            <el-avatar :size="94" :src="broker.avatar + '?imageView2/5/h/100/w/100'" />
            <div class="info">
                <div class="name">{{ broker.name }}</div>
                <div class="count">
                </div>
            </div>

            <div class="actions">
                <div :style="{ background: btn2 }" class="btn chat">聊天</div>
                <div :style="{ background: btn1 }" class="btn call">电话</div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data () {
        return {
            loading: false,
        };
    },
    props: {
        broker: { type: Object, default: null },
    },

    mounted: function () { },

    computed: {

        bg: function () {
            return this.$store.state.myconfig.color.broker_cell_bg || ''
        },

        btn1: function () {
            return  this.$store.state.myconfig.color.primary_btn || '#1989fa'
        },
        btn2: function () {
            return  this.$store.state.myconfig.color.secondary_btn || '#1989fa'
        },

    },


    methods: {},
};
</script>

<style scoped>
.cells {
    padding: 0 20px 20px 20px;
}

.broker-item {
    height: 130px;
    width: 100%;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.broker-item .count {
    display: flex;
    font-size: 24px;
    color: #999;
}

.broker-item .name {
    margin-bottom: 16px;
    font-size: 24px;
    color: #000;
    font-weight: bolder;
}

.broker-item .info {
    height: 100%;
    width: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.broker-item .actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 260px;
}

.broker-item .actions .btn {
    height: 50px;
    border-radius: 24px;
    font-size: 24px;
    width: 120px;
    line-height: 50px;
    color: #fff;
    text-align: center;

}
</style>
